<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link rel="stylesheet" href="css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="css/mianfeike.css" />
		<title>免费课</title>
	</head>
	<body>
		<!-- 侧边栏 -->
		<div class="cebianlan">
			<div class="zhixun">
				<img src="img/6咨询.png">
				<div class="zhixun1"><a href="#">咨询</a></div>
			</div>
			<div class="bangzhu">
				<img src="img/帮助.png">
				<div class="zhixun1"><a href="#">帮助</a></div>
			</div>
			<div class="weixin">
				<img src="img/微信.png" class="wiexin1">
				<div class="zhixun1"><a href="#">微信</a></div>
				<div class="weixin2">
					<span>欢迎关注米泡教育</span>
					<img src="./img/erweima.jpg">
				</div>
			</div>
			<div class="yanjing">
				<img src="img/眼睛.png">
				<div class="zhixun1"><a href="#">监督</a></div>

			</div>
			<div class="yanjing">
				<a href="#maodian"><img src="img/向上.png"></a>
			</div>
		</div>

		<!-- 导航栏 -->
		<div class="f1" id="maodian">
			<div class="container">
				<!-- 左侧 -->
				<div class="left">
					<img src="./img/head-logo.svg" alt="">
					<ul class="nav">
						<li><a href="index.html">首页</a></li>
						<li><a href="mianfei_course.html">免费课</a></li>
						<li><a href="shizhan_course.html">精品课</a></li>
					</ul>
				</div>
				<!-- 右侧 -->
				<div class="right">
					<div class="souSuo">
						<input type="text" placeholder="请输入课程" id="input" />
						<a href=""><img src="img/黄色搜索icon.png"></a>
					</div>
					<div class="gouWuChe">
						<img src="img/购物车.png">
						<span><a href="Shopping_cart.html">购物车</a></span>
					</div>
					<div class="geRenZhonXin">
						<span><a href="PersonalCenter.html">个人中心</a></span>
						<div class="touxiang">
							<img src="img/1.jpg" alt="">
							<ul class="xialacaidan">
								<!-- 下拉菜单 -->
						<li><a href="PersonalCenter.html">我的账户</a></li>
						<li><a href="PersonalCenter.html">我的课程</a></li>
						<li><a href="login.html">退出</a></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="mp">
			
			<img src="./img/1FC06ED389F34B79909100CD5254D093.png" >

		</div>
		<!-- 第二楼 -->
		<div class="f2">
			<div class="container">
				<div class="body">
					<!-- 				<div>
					<a href="">
						<img src="./img_course/mianfeike/3_uVqNyVm.png">
						<div id="">
							<p>0基础6个月炼成人工智能时代热门人才</p>
							<p><span>学习人数：2222</span><span>进阶:36h</span></p>
						</div>
					</a>
				</div> -->

				</div>
				<!-- 分页 -->
				<div id="pages">
					<span class="cur">1</span>
					<span>2</span>
					<span>3</span>
					<span>4</span>
				</div>

			</div>
		</div>

		<!-- 最后一楼 -->
		<div class="foot1">
			<div class="container">
				<!-- 左边 -->
				<div class="left">
					<div class="foot-Box">
						<div class="title">关于米泡</div>
						<ul>
							<li><a href="#">关于我们</a></li>
							<li><a href="#">荣誉资质</a></li>
							<li><a href="#">网站地图</a></li>
							<li><a href="#">练习我们</a></li>
							<li><a href="#">加入我们</a></li>
						</ul>
					</div>
					<div class="foot-Box">
						<div class="title">帮助中心</div>
						<ul>
							<li><a href="#">如何购买观看</a></li>
							<li><a href="#">优惠券介绍</a></li>
							<li><a href="#">余额介绍</a></li>
							<li><a href="#">就业班课程</a></li>
							<li><a href="#">更多&gt;&gt;</a></li>
						</ul>
					</div>
					<div class="foot-Box">
						<div class="title">推荐课程</div>
						<ul>
							<li><a href="#">JavaScript训练营</a></li>
							<li><a href="#">前端开发</a></li>
							<li><a href="#">大全栈工程师</a></li>
							<li><a href="#">Linux云计算</a></li>
							<li><a href="#">数据库开发</a></li>
						</ul>
					</div>
				</div>
				<!-- 右边 -->
				<div class="right">
					<div class="gongzhonghao">
						<p>公众号</p>
						<img src="img/erweima.jpg">
					</div>
					<div class="douyinhao">
						<p>抖音号</p>
						<img src="img/douyinhao.jpg">
					</div>
				</div>
			</div>
		</div>
		<div class="foot2">
			<div class="container">
				<div class="foot2-box">
					<p>地址：武汉市黄陂区武湖街道汉口北大道1号武汉文理学院</p>
					<p>©2022-2023武汉米泡教育科技有限公司版权所有 京ICP备16378246号-1</p>
					<p><img src="img/备案.png">京公网安备 11010102002019号</p>
				</div>
			</div>
		</div>
		<script src="js/jquery-3.6.0.min.js"></script>
		<script type="text/javascript">
			//分页
			$('#pages>span').click(function() {
				// 1. 找到 .cur 的, 删除样式
				// $('#pages>.cur').removeClass('cur')
				// siblings: 兄弟姐妹 们
				$(this).addClass('cur').siblings().removeClass('cur')
				// 当前项.添加cur样式.兄弟姐妹们.删除cur样式
				var p = $(this).index() * 3
				$('#pages>span').click(getData(p))
				// console.log(p)	  
			})
			//ajax请求
			function getData(p) {
				var url = `/index/course_mianfei?p=${p}`
				$.get(url, data => {
					console.log(data);
					$(".f2>.container>.body>div").remove()//移除页面元素
					let html_one = data.map(value => {
						const {
							course_title: t,
							course_image: i,
							course_hourse: h,
							course_id: id,
							course_studyNumber: r
						} = value;
						return `
							<div>
								<a href="course_detail.html?lid=${id}">
								<img src="${i}">
								<div id="">
									<p>${t}</p>
									<p><span>学习人数：${r}</span><span>进阶:${h}h</span></p>
								</div>
								</a>
							</div>
				        `;
					});
					$(".f2>.container>.body").append(html_one);
				});
			}
			window.onload = function() {
				console.log(1)
				getData(0)
			}
		</script>

		<script type="text/javascript">
			$('#input').keydown(function(e){
				if(e.keyCode==13){
					let keyword = $(this).val()
					$(window).attr('location','/input.html?keyword='+keyword);	
				}
			})
		</script>
	</body>
</html>
